<template>
  <div>
    <el-row style="margin-top: 20px;margin-left:200px;">
      <el-col :span="4" style="font-size: 20px;"><span style="margin-right: 30px; color: rgb(205,65,60);font-weight: bolder;font-size: 30px;">EMALL</span> 结算页</el-col>
      <el-col :span="16">
        <el-steps :active="1" align-center :space="200" finish-status="success">
          <el-step title="1 我的购物车"></el-step>
          <el-step title="2 填写核对订单信息"></el-step>
          <el-step title="3 成功提交订单"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row style="text-align: left; font-size: 18px;margin-left: 200px;margin-right: 200px;">
      <el-row style="color: gray; padding-bottom: 10px;padding-top: 10px;">
        填写并核对订单信息
      </el-row>
      <el-row>
        <el-row style="border: 1px solid #eeeeee;padding: 20px;">
          <el-row style="text-align: left;margin-bottom: 20px;">
            <span style="font-size: 20px;font-weight: bolder;color: black;">收货人信息</span>
          </el-row>
          <el-table

            @row-click="handleRowClick"
            :show-header="false"
            :data="addresses"
            style="width: 100%"

            max-height="220">
            <el-table-column
              width="1200"
            >
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="2">
                    <div
                      :class="{'shipping-user':scope.row.id!==selectedAddressItem.id,'selected-addr-item':scope.row.id===selectedAddressItem.id}">
                      {{scope.row.shippingUser}}
                    </div>
                  </el-col>
                  <el-col :span="10" style="margin-left: 30px;">
                    <span>
                      {{scope.row.shippingUser}} &nbsp;&nbsp;
                      {{scope.row.province}}
                      {{scope.row.city}}
                      {{scope.row.district}}
                      {{scope.row.address}}
                    </span>
                  </el-col>
                  <el-col :span="4">
                    <span>
                      {{scope.row.shippingPhone}}
                    </span>
                  </el-col>
                  <el-col :span="4" v-if="scope.row.isDefault==1">
                    <span style="background-color:rgb(153,153,153);color:white;font-size: 14px;padding:3px;">
                      默认地址
                    </span>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="font-size: 14px;color: gray;margin-top: 10px;padding-left: 10px;">
            <span style="cursor: pointer;" v-if="!addressListExpand" @click="addressListExpand=true">更多地址<i
              class="el-icon-arrow-down"></i> </span>
            <span style="cursor: pointer;" v-else @click="addressListExpand=false">收起地址<i class="el-icon-arrow-up"></i></span>
          </el-row>
          <el-divider></el-divider>
          <el-row style="text-align: left;margin-bottom: 20px;">
            <span style="font-size: 20px;font-weight: bolder;color: black;">所购商品</span>
          </el-row>
          <el-row>
            <el-row v-for="item of products" :key="item.id" style="border-bottom:1px solid #eeeeee;padding:10px;">
              <el-col :span="1">
                <el-image :src="imageServer+'/'+item.skuImage" fit="fit"></el-image>
              </el-col>
              <el-col :span="16" style="margin-right:20px;color:gray;font-size: 14px;">
                {{item.skuName}}
              </el-col>
              <el-col :span="2">
                <span style="color:red; font-size: 14px;font-weight: bolder;">¥{{(item.skuPrice/100).toFixed(2)}}</span>
              </el-col>
              <el-col :span="1" style="margin-left:20px;font-size:14px;">
                <span>x{{item.skuCount}}</span>
              </el-col>
              <el-col :span="1" style="margin-left:20px;color:gray;font-size: 14px;">
                <span>有货</span>
              </el-col>
            </el-row>
          </el-row>
          <el-row style="text-align: left;margin-bottom: 20px;margin-top: 20px;">
            <span style="font-size: 20px;font-weight: bolder;color: black;">发票信息</span>
          </el-row>
          <el-row>
            <el-col :span="4">
              <span style="color:gray;font-size: 14px;padding-left: 20px;">
                电子普通发票
                <el-tooltip effect="light" placement="right" content="电子普通发票与纸质发票具有同等法律效力，可支持报销入账，商品售后凭证。">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </span>
            </el-col>
          </el-row>
        </el-row>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="21" style="text-align: right;font-size: 14px;">
          <span style="color:gray;"><span style="color:red;">{{totalCount}}</span> 件商品,总商品金额:</span>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <span>¥{{(totalPrice/100).toFixed(2)}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="21" style="text-align: right;font-size: 14px;">
          <span style="color:gray;"> 运费:</span>
        </el-col>
        <el-col :span="2" style="text-align: right;color:gray;font-size: 14px;">
          <span>
            <el-tooltip effect="light" placement="right" content="开发者有生之年不要运费">
                  <i class="el-icon-info"></i>
            </el-tooltip>
            <span style="color:black;"> ¥0</span></span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;background-color:#eeeeee;height: 80px;padding-top: 30px;padding-bottom: 80px;">
        <el-row >
          <el-col :span="21" style="text-align: right;font-size: 14px;">
            <span style="color:gray;"> 应付总金额:</span>
          </el-col>
          <el-col :span="2" style="text-align: right;color:gray;font-size: 20px;color:red;font-weight: bolder;">
          <span>
            ¥{{(totalPrice/100).toFixed(2)}}
          </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23" style="text-align: right;font-size: 14px;">
          <span style="color:gray;">
            寄送至: {{selectedAddressItem.province}} {{selectedAddressItem.city}}{{selectedAddressItem.district}}{{selectedAddressItem.address}}
            收货人: {{selectedAddressItem.shippingUser}} {{selectedAddressItem.shippingPhone}}
          </span>
          </el-col>
        </el-row>
      </el-row>
      <el-row style="margin-top: 20px;">
        <div
          @click="handleSubmitOrder"
          style="cursor:pointer; border-radius: 2px;color: white;font-weight: bold; width: 100px;height: 40px;background-color:rgb(205,65,60);float: right;display: flex;align-items: center;justify-content: center;">提交订单</div>
      </el-row>
    </el-row>

  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "OrderCreating",
    data() {
      return {
        addressList: [],
        selectedAddressItem: {},
        addressListExpand: false
      }
    },

    computed: {
      ...mapState({
        user: state => state.auth.user,
        cart: state=>state.auth.cart,
        products: state => state.auth.cart.items.filter(value => value.selected == 1),
        imageServer: state => state.prod.imageServer
      }),

      addresses() {
        return this.addressListExpand ?
          this.addressList.sort((a, b) => {
            if (a === this.selectedAddressItem) {
              return -1;
            } else {
              return 0;
            }

          })
          : [this.selectedAddressItem];
      },

      totalPrice() {
        var p = 0;
        this.products.forEach(product => p += product.skuPrice * product.skuCount);
        return p;
      },

      totalCount() {
        var c = 0;
        this.products.forEach(product => c += product.skuCount);
        return c;
      }
    },

    created() {
      this.api.__api__CustomerShippingAddrs(this.user.id)
        .then(data => {
          this.addressList = data.data;
          this.selectedAddressItem = this.addressList[this.addressList.findIndex((value => value.isDefault == 1))];

        }).catch(error => null);
    },

    methods: {

      handleRowClick(row, column, event) {
        this.selectedAddressItem = row;
        this.addressListExpand = false;
      },

      //提交订单
      handleSubmitOrder(){
        const order = {};
        order.customerId = this.user.id;
        order.shippingUser = this.selectedAddressItem.shippingUser;
        order.shippingPhone = this.selectedAddressItem.shippingPhone;
        order.shippingMoney = 0;
        order.province = this.selectedAddressItem.province;
        order.city = this.selectedAddressItem.city;
        order.district = this.selectedAddressItem.district;
        order.address = this.selectedAddressItem.address;
        order.orderMoney = this.totalPrice;
        order.status = 0;

        const items = [];
        this.products.forEach(p=>{
          items.push({skuId:p.skuId,count:p.skuCount});
        })
        order.items = items;

        this.api.__api__OrdersAdd(order)
          .then(data=>{
            const orderId = data.data;
            const cartId = this.cart.id;
            const cartItemIds = [];
            this.products.forEach(v=>cartItemIds.push(v.id));
            this.api.__api__CartItemsDelete(cartId,cartItemIds)
              .then(data1=>{
                this.$store.commit('setCart',data1.data);
              }).catch(error=>null);
            this.$router.push({path:`/payment/${orderId}`}).catch(error=>null);
          }).catch(error=>null)
      }
    }
  }
</script>

<style scoped>
  .selected-addr-item {
    border: 2px solid red;
    text-align: center;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-right: 5px;
    padding-top: 2px;
  }

  .shipping-user {
    text-align: center;
    border: 2px solid lightgray;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-right: 5px;
    padding-top: 2px;

  }
</style>
